<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>我道</title>
    <meta name="description" content="我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/screen.css" />
    <link rel="stylesheet" href="/css/iDisqus.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/monokai-sublime.css">


</head>
<body class="home-template" id="s-top">

    <div class="nav">
<div class="nav_body">
  <div class="b_logo"> 
      <a class="blog-logo" href="/"><img src="/img/logo-mini.png" alt="我道" /></a>
  </div>
  <div class="b_class"> 
    <ul>
    	/ || 首页

        <li class="nav-"><a class="" href="/rss">订阅</a></li>

    </ul>
  </div>
</div>
</div>
    <div class="post-bg" style="background-image: url(/img/default.jpg);"></div>
<div class="site-wrapper" page-type="c-post">
<main class="content" role="main">
	<div class="post-toppic" style="">
        <div class="picbox">
          <img node-type="articleHeaderPic" src="/img/default.jpg">
        </div>
     </div>
    <article class="post">

        <header class="post-header">
            <h1 class="post-title">[开发日志]2：项目进度(更新贴)</h1>
            <section class="post-meta">
                <time class="post-date" datetime="Fri Apr 21 2017 12:55:34 GMT+0800">2017/4/21</time> [object Object]
            </section>
        </header>

        <section class="post-content">
            <h3 id="目前已经实现的功能"><a href="#目前已经实现的功能" class="headerlink" title="目前已经实现的功能"></a>目前已经实现的功能</h3><p>2017年4月22日 增加商品、人员<br>2017年4月22日 商品列表<br>2017年4月22日 晒单完成了一半，就差写提交函数。</p>
<h3 id="待实现的功能"><a href="#待实现的功能" class="headerlink" title="待实现的功能"></a>待实现的功能</h3><ol>
<li>商品、人员的修改和删除，人和商品不打算做删除功能，到时候加个商品状态，不需要的品种设置成作废，并不查询出来。</li>
<li>晒单提交</li>
<li>营业员晒单列表</li>
<li>营业员晒单明细</li>
<li>营业员、管理员多功能查询</li>
<li>管理员审核晒单列表</li>
<li>管理员晒单审核</li>
</ol>
<h3 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h3><p>搭建webapp应用和用动态语言编写网页有一些区别。首先，打包好的网站页面均是静态页面，不会有任何服务器端语言。因为app打包好后相当于套了一个andriod或者ios程序的壳运行在本地的静态程序而已。所有数据库操作均通过ajax请求服务器端，服务器端提供接口实现。这点是一定要搞明白的。</p>
<p>fa7的webapp项目文件结构如下。</p>
<p><img src="http://cdn.4zen.top/image/6/c2/25f72699c59efe4c8c384539d925a.png" alt=""></p>
<p>所有的业务逻辑均写在一个js文件之中，所以f7开发大型项目并不合适，写道后期js文件会非常庞大，而且不好阅读。</p>
<p>其次是服务器端，我这里用的是CI，后台的主要是编写对应的api接口提供前台使用，几乎所有的数据交互我均是通过json来实现的。</p>
<p><img src="http://cdn.4zen.top/image/1/93/7efd5c7c72aa0e9e6b43471466fdd.png" alt=""></p>
<h3 id="使用framework7时需要注意的地方"><a href="#使用framework7时需要注意的地方" class="headerlink" title="使用framework7时需要注意的地方"></a>使用framework7时需要注意的地方</h3><p>f7的所有页面载入在不修改默认设置的情况下均是通过ajax加载出来的，而且还做了缓存。并且在载入首页的时候不会调用对应的页面初始化事件，所以在编写一些用于页面初始化调用的函数的时候一定要在对事件里面引用。</p>
<p>像我就碰到了一个问题，我需要一个首页载入完毕的时候载入所有的商品资料。最开始的函数写在页面初始化的回调函数里，但是后来发现并没有被调用，而且如果使用f7的事件绑定函数单独以这种形式写在外面也是行不通的。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$$(document).on(&apos;load&apos;, function() &#123;</div><div class="line">	alert(&quot;123&quot;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>我后来尝试了很多办法均补成功，后来改变了自己的思路：需要加载商品资料的这个页面并不是首页，而是一个内页，也许f7的默认逻辑就是首页不需要初始化，它是一个本来就初始化完成的页面。后来我选择再增加了一个登录页面跳转到这个页面后在页面的初始化函数里完成了数据加载（另外，也许可以用jquery来绑定也许可以成功，不过我没尝试了）</p>

        </section>

        <footer class="post-footer">

            <figure class="author-image">
                <a class="img" href="" style="background-image: url(/img/avatar.png)"><span class="hidden">的头像</span></a>
            </figure>


            <section class="author">
                <h4><a href=""></a></h4>

                    <p>我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。</p>

                    <p>继续阅读此作者的<a href="http://www.4zen.top">更多文章</a>。</p>

                <div class="author-meta">
                    <span class="author-location icon-location">自贡</span>
                    <span class="author-link icon-link"><a href="http://www.4zen.top">http://www.4zen.top</a></span> 
                </div>
            </section>


            <section class="share">
                <h4>分享此博文</h4>
                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

            </section>

        </footer>
	<div id="comment"></div>
    </article>

</main>
    <aside class="read-next">
        
        <a class="read-next-story" style="background-image: url(/img/default.jpg)" href="/sublime-text-3-quick-key/">
            <section class="post">
                <h2>一些sublime text快捷键收集</h2>
                <p>下面是我通过网上视频教程或文本资料学习sublime Text3时收集的一些实用功能和常用快捷键，现在分享出来，如果还有其它的好用的功能可以在下面留言，以便互相学习。PS：ST3在Mac OX与Win&hellip;</p>
            </section>

        </a>
        
        
        <a class="read-next-story prev " style="background-image: url(/img/default.jpg" href="/tu-cao/">
            <section class="post">
                <h2>吐槽</h2>
                <p>不知道framework7国内用的人少还是大家都不想指点别人的问题，感觉出了问题后即便是在上千人的QQ群里提问也不会有人回答你。
因为这两天想完成目前在进行的这个app，因为framework7我认识&hellip;</p>
            </section>
        </a>
        
    </aside>

    </div>

    <div class="sidebar">  
        <a href="#s-top" class="s-top" to="#s-top"><i class="fa fa-chevron-up" action-type="goTop"></i></a>
    </div>

    <footer class="site-footer clearfix">
        <section class="copyright"><a href="">我道</a> &copy; </section>
        <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a> &amp; <a href="http://www.ghostchina.com">GhostChina</a></section>
    </footer>

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/plugin.js"></script>
    <script src="/js/index.js"></script>

</body>
</html>
